<template>
  <div class="login">
    <van-nav-bar title="登录"></van-nav-bar>
    <van-form @submit="onSubmit">
      <van-field
        v-model="form.mobile"
        label="手机号"
        :rules="[
          { required: true, message: '必填' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请正确输入手机号'
          }
        ]"
      ></van-field>
      <van-field
        v-model="form.code"
        label="验证码"
        :rules="[
          { required: true, message: '必填' },
          {
            pattern: /^\d{6}$/,
            message: '请正确输入验证码'
          }
        ]"
      ></van-field>
      <div class="btn">
        <van-button
          type="primary"
          color="#1989fa"
          round
          block
          native-type="submit"
          :loading="loading"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
// 确定接口调用
// 1：下载axios
// 2:导入axios
// 3:使用axios
// import axios from 'axios'
// axios.defaults.baseURL = 'http://toutiao.itheima.net'
import { authorizations } from '@/api/login.js'
export default {
  data () {
    return {
      loading: false,
      form: {
        mobile: '13911111111',
        code: '246810'
      }
    }
  },
  methods: {
    async onSubmit () {
      console.log('onSubmit')
      this.loading = true
      try {
        const res = await authorizations(this.form)
        this.$toast.success('登录成功')
        // 存储token
        this.$store.commit('setTokenObj', res.data)
        // 跳转到首页
        const redirect = this.$route.query.redirect
        this.$router.push(redirect || '/layout/home')
        console.log(res)
      } finally {
        this.loading = false
      }
      // 基本提示
      // this.$toast('登录成功')
      // 成功提示
      // this.$toast.success('登录成功')
      // 失败提示
      // this.$toast.fail('登录失败')
      // 加载中提示
      // this.$toast.loading('加载中...')
      // 消失toast:1:提示一个新的toast 2:清理提示: this.$toast.clear()
    }
  }
}
</script>
<style lang="less" scoped>
.btn {
  padding: 15px;
}
</style>
